<template>
  <div>
    <header>
      <h4>
        <span>
          <van-icon @click="$router.push('/ticket')" name="arrow-left" />
        </span>
        <p>
          <a
            v-for="v in types"
            :key="v"
            :class="type === v ? 'active' : ''"
            @click="
              () => {
                type = v;
              }
            "
          >
            {{ v }} >
          </a>
        </p>
      </h4>
      <dl>
        <dd class="con">
          <van-row class="col">
            <van-col :span="8">
              {{ list.values.line }}
            </van-col>
            <van-col :span="8">
              {{ list.values.train }}
            </van-col>
            <van-col :span="8">
              {{ list.values.line1 }}
            </van-col>
          </van-row>
          <van-row class="cel">
            <van-col :span="8">
              {{ list.values.time }}
            </van-col>
            <van-col :span="8">
              <!-- {{  list.values.time.slice(0, 2) + "小时" +  list.values.time.slice(3, 4) + "分" }} -->
            </van-col>
            <van-col :span="8">
              {{ list.values.time1 }}
            </van-col>
          </van-row>
        </dd>
        <dd class="con">
          <van-row class="cel">
            <van-col :span="8"> 一等有票</van-col>
            <van-col :span="8"> 二等有票</van-col>
            <van-col :span="8"> 商务 {{ list.values.car }} </van-col>
          </van-row>
        </dd>
      </dl>
    </header>
    <div class="one">
      <span> 取票号 {{ list.values.po }} </span>
      出票成功
      <a> 请您持票证件在车站或者代售点按时乘车 </a>
    </div>
    <div class="one">
      乘客 (1人)<br />
      <span>
        ${{ list.values.price }}<br />
        {{ list.values.type }}
      </span>
      {{ list.values.name }}<br />
      {{ list.values.mobile }}<br />
      {{ list.values.car }}车厢 {{ list.values.num }}号
    </div>
    <div class="one">
      <van-cell-group inset>
        <van-field
          v-model="form.mobile"
          label="手机号"
          placeholder="请输入手机号"
        />
      </van-cell-group>
    </div>
    <div class="one"> 
       &emsp;订单号 : {{ list.values.po }}
    </div>
  </div>
</template>

<script>
import { GetUrl } from "@/request/request";
import { useRoute } from "vue-router";
import { onMounted, reactive } from "@vue/runtime-core";
export default {
  setup(props, content) {
    const router = useRoute();
    const list = reactive([]);
    const a = ref([])
    const form = reactive({ mobile: '1562342' });
    async function getlist() {
      const res = await GetUrl("/detail", { id: router.params.id });

      list.values = { ...res.data.data };
    }
    onMounted(() => {
      getlist();
    });
    return {
      getlist,
      form,
      list,
    };
  },
};
</script>

<style scoped  lang='scss' >
header {
  background-color: cadetblue;
  height: 170px;
  width: 100%;
  color: white;
  h4 {
    line-height: 30px;
    padding: 10px;
  }
  p {
    float: left;
    line-height: 30px;
    margin-top: -5px;
    margin-left: 10px;
    font-size: 14px;
    a {
      display: inline-block;
      width: 68px;
    }
    a.active {
      color: #ccc;
    }
  }
  i {
    float: left;
    background-color: white;
    color: #000;
    border-radius: 50%;
    padding: 3px;
  }
}
.row {
  text-align: center;
  font-size: 20px;
  line-height: 50px;
}
.con {
  overflow: hidden;
  margin: 0px auto;
  margin-left: 7px;
  line-height: 37px;
  .col {
    text-align: center;
    font-size: 16px;
    width: 94%;
    border-bottom: solid 1px #ccc;
  }
  .cel {
    font-size: 17px;
    text-align: center;
    margin-left: 5px;
  }
}
.one {
  font-size: 14px;
  border-bottom: solid 5px #f4f4f4;
  padding: 10px;
  line-height: 30px;
  a {
    display: block;
  }
  span {
    float: right;
  }
}
</style>